<!-- 我的订阅 -->
<template>
    <div class="orderDom">
      <el-dialog title="审核" :visible.sync="dialogExamine" width="75%" top="10px">
        <div style="height: calc(100vh - 260px); overflow-y: auto;">
            <myCustomization ref="myCustomizationRef" viewType="view" :viewParams="viewParams"></myCustomization>
        </div>
        <div class="dialog-border"></div>
        <el-form :model="formIsexamine" class="demo-form-mini">
          <!-- <el-form-item label="">
            <el-radio-group
              class="radio-isexamine"
              v-model="formIsexamine.isexamine"
            >
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核拒绝</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="审核备注">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="formIsexamine.examineview"
              maxlength="500"
              show-word-limit
              rows="3"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogExamine = false">取 消</el-button>
          <el-button type="primary" @click="handleExamine2">审核通过</el-button>
          <el-button type="warning" @click="handleExamine3">审核拒绝</el-button>
        </span>
      </el-dialog>
      <el-dialog title="文件列表" :visible.sync="dialogDownload" width="60%">
        <!-- <el-form :inline="true" :model="currentRow" class="demo-form-inline-box">
          <el-form-item label="IP地址">
            {{ currentRow.ipaddr }}
          </el-form-item>
          <el-form-item label="端口号">
            {{ currentRow.protno }}
          </el-form-item>
          <el-form-item label="路径">
            {{ currentRow.url }}
          </el-form-item>
          <br />
          <el-form-item label="账号">
            {{ currentRow.account }}
          </el-form-item>
          <el-form-item label="密码">
            {{ currentRow.password }}
          </el-form-item>
        </el-form> -->
        <el-table
          v-loading="tableLoading"
          :data="fileList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="product" label="产品"> </el-table-column>
          <el-table-column prop="frequency" label="时次"> </el-table-column>
          <el-table-column prop="startime" label="开始时间"> </el-table-column>
          <el-table-column prop="endtime" label="结束时间"> </el-table-column>
          <el-table-column prop="size" label="数据容量"> </el-table-column>
          <el-table-column prop="state" label="传输状态">
            <template slot-scope="scope">
              {{ scope.row.state == 1 ? "传输成功" : "传输失败" }}
            </template>
          </el-table-column>
  
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="success"
                @click="handleCopy(scope.row)"
                size="small"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDownload = false">关 闭</el-button>
          <!-- <el-button type="primary" @click="handleCopy">复制信息</el-button> -->
        </span>
      </el-dialog>

      <!-- <div style="font-size: 18px; color: #000; padding-bottom: 10px;"> 此订单需由贵部业务机关部门审核并函提XXXXXXXXXX</div> -->
      <el-tabs v-model="activeName" @tab-click="handleTabsClick">
        <el-tab-pane
          label="进行中订单"
          name="orderProgress"
        ></el-tab-pane>
        <el-tab-pane
          label="历史订单"
          name="orderHistory"
        ></el-tab-pane>
        <!-- <el-tab-pane
          v-if="isadmin == 1"
          label="待审核订单"
          name="isexamine_1"
        ></el-tab-pane>
        <el-tab-pane
          v-if="isadmin == 1"
          label="审核通过订单"
          name="isexamine_2"
        ></el-tab-pane>
        <el-tab-pane
          v-if="isadmin == 1"
          label="审核拒绝订单"
          name="isexamine_3"
        ></el-tab-pane> -->
      </el-tabs>
      <div class="formDom">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="订单类型">
                <el-select v-model="formInline.classfiy" placeholder="请选择">
                    <el-option label="全部" :value="0"> </el-option>
                    <el-option label="军综网" :value="1"> </el-option>
                    <el-option label="指挥专网" :value="2"> </el-option>
                </el-select>
            </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="formInline.no" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="资料名称">
            <el-input
              v-model="formInline.filename"
              placeholder="资料名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex">
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
              <el-button type="primary" @click="onExcel" v-if="isadmin == 1">导出</el-button>
              <el-upload
                class="upload-demo"
                style="margin-left: 10px;"
                action="#"
                :on-progress="onImport"
                :limit="1"
                :show-file-list="false"
                accept=".xls,.xlsx"
                v-if="isadmin == 1"
                >
                <el-button type="primary">导入</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
            <!-- <el-button type="primary" @click="onImport">导入</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="tableDom">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="序号" width="50"> </el-table-column>
          <el-table-column prop="type" label="订单类型">
            <template slot-scope="scope">
              {{ scope.row.lmsa ? "指挥专网" : "" }}
              {{ scope.row.ipaddr ? "军综网" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="no" label="订单编号"> </el-table-column>
          <el-table-column prop="filename" label="数据资源名称">
          </el-table-column>
          <el-table-column v-if="isadmin == 1" prop="username" label="用户">
          </el-table-column>
          <!-- <el-table-column prop="isexamine" label="审核状态">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.isexamine == 2
                    ? 'success'
                    : scope.row.isexamine == 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.isexamine == 2
                    ? "审核通过"
                    : scope.row.isexamine == 1
                    ? "待审核"
                    : "审核拒绝"
                }}</el-tag
              >
            </template>
          </el-table-column> -->
          <!-- <el-table-column prop="datelong" label="定制时长"> </el-table-column> -->
          <el-table-column prop="state" label="订单状态">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.state == 2
                    ? 'success'
                    : scope.row.state == 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.state == 2
                    ? "进行中"
                    : scope.row.state == 1
                    ? "未启用"
                    : "已停止"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="endtime" label="服务结束时间"> </el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope">
              <!-- <el-button
                v-if="activeName != 'orderHistory' && isadmin == 1 &&  scope.row.isexamine == 1"
                @click="handleExamineShow(scope.row)"
                type="text"
                size="small"
                >审核</el-button
              > -->
              <el-button
                v-if="activeName != 'orderHistory' && scope.row.isexamine == 2"
                @click="handleStop(scope.row)"
                type="text"
                size="small"
                >{{ scope.row.state == 2 ? "停止服务" : "运行服务" }}</el-button
              >
                <el-button @click="handleShow(scope.row, scope.row.lmsa)" type="text" size="small" >
                    {{ scope.row.lmsa ? "修改订单" : "查看定制" }}
                </el-button  >
              <el-button v-if="scope.row.isexamine == 2 || scope.row.state == 3" @click="handleDownload(scope.row)" type="text"  size="small" >数据清单</el-button >
              <el-button v-if="scope.row.isexamine == 3 || scope.row.isexamine == 1 || scope.row.type == 2" @click="handleDelete(scope.row)" type="text" size="small" >删除</el-button >
              <el-button v-if="scope.row.lmsa" type="text" size="small">导出订单</el-button >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <ComPagination
        :total="total"
        :currentPage="formInline.pageNum"
        :pageSize="formInline.pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></ComPagination>
      <!-- <div v-show="activeName == 'orderProgress'"></div>
      <div v-show="activeName == 'orderHistory'"></div> -->
  
        <el-dialog title="地图框选" :visible.sync="dialogListInfo" width="75%" top="10px"  :before-close="handleClose">
              <div style="width: 100%; height: 800px; overflow-y: auto;">
                  <myCustomization ref="myCustomizationRef" :viewType="viewType" :viewParams="viewParams"></myCustomization>
              </div>
              <span slot="footer">
                <div style="text-align: end;border-top: 1px solid #ddd;padding-top: 20px;">
                    <el-button size="small" @click="dialogListInfo = false">返 回</el-button>
                    <!-- <el-button size="small" type="primary" @click="dialogListInfo = false">确 定</el-button> -->
                </div>
              </span>
          </el-dialog>
    </div>
  </template>
  
  <script>
  import ComPagination from "@/components/comPagination.vue";
  import myCustomization from "@/views/myCustomization/index.vue";
  
  export default {
    components: {
      ComPagination,
      myCustomization,
    },
    data() {
      return {
        tableLoading: false,
        dialogDownload: false,
        dialogExamine: false,
  
        dialogListInfo: false,
        dialogExamineStatus: false,
        viewParams: {},
  
  
        activeName: "orderProgress",
        viewType: 'view',
        total: 0,
        userid: sessionStorage.getItem('userid'),
        isadmin: sessionStorage.getItem('isadmin'), // 1 超级管理员 2 普通管理员
        currentRow: {},
        formInline: {
          type: 1,
          no: "",
          classfiy: 0,
          filename: "",
          isexamine: 0,
          pageNum: 1,
          pageSize: 10,
        },
        formFile: '',
        formIsexamine: { examineview: "", isexamine: 1 },
        tableData: [
          // {
          //   id: "234324320191892",
          //   date: "一个月",
          //   time: "2016-05-02",
          //   name: "全球argo浮标观测资料",
          //   type: "通过",
          // },
          // {
          //   id: "234324320191893",
          //   date: "一年",
          //   time: "2023-01-01",
          //   name: "全国地名数据",
          //   type: "通过",
          // },
          // {
          //   id: "234324320191895",
          //   date: "一个月",
          //   time: "2022-09-01",
          //   name: "全国影像图",
          //   type: "通过",
          // },
          // {
          //   id: "234324320191896",
          //   date: "一个月",
          //   time: "2018-02-12",
          //   name: "全国省达组网拼图",
          //   type: "待审核",
          // },
        ],
        fileList: [],
      };
    },
    created() {
      this.onSearch();
      this.userid = sessionStorage.getItem("userid");
      this.isadmin = sessionStorage.getItem("isadmin");
    //   console.log(this.isadmin);
      
    },
    methods: {
      onSearch() {
        let req = {
          filename: this.formInline.filename,
          no: this.formInline.no,
          pageNum: this.formInline.pageNum,
          pageSize: this.formInline.pageSize,
          isexamine: 0,
          type: this.formInline.type,
          userid: this.userid,
          classfiy: this.formInline.classfiy,
        };
        // if (this.isadmin) {
        //   req.type = 0;
        // } else {
        //   if (this.activeName == "orderProgress") {
        //     req.type = 1;
        //   }
        //   req.isexamine = 0;
        // }
        this.tableLoading = true;
        this.tableData = [];
        this.$http
          .post(`/fileSubscribe/list`, req)
          .then((res) => {
            this.tableLoading = false;
            if (res.code == 200) {
              this.tableData = res.data.records || [];
              this.total = res.data.total || 0;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.tableLoading = false;
            this.$message.error(err.message);
          });
      },
      onReset() {
        this.formInline = {
            type: 1,
            no: "",
            classfiy: 0,
            filename: "",
            isexamine: 0,
            pageNum: 1,
            pageSize: 10,
        };
      },
      // 导出
      onExcel() {
        this.formInline.userid = sessionStorage.getItem("userid");
        this.$http.postFile(`/fileSubscribe/list/excel`, this.formInline).then((res) => {
            if (res.status == 200) {
                let data = res.data
                let blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                let fileName = decodeURI(res.headers['content-disposition'])
                // console.log(fileName);
                // saveAs(blob, `${fileName}.xlsx`);

                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
                    window.navigator.msSaveBlob(blob, `${fileName}`)
                } else {
                    // 创建新的URL并指向File对象或者Blob对象的地址
                    const blobURL = window.URL.createObjectURL(blob)
                    // 创建a标签，用于跳转至下载链接
                    const tempLink = document.createElement('a')
                    tempLink.style.display = 'none'
                    tempLink.href = blobURL
                    tempLink.setAttribute('download', `${fileName}`)
                    // 兼容：某些浏览器不支持HTML5的download属性
                    if (typeof tempLink.download === 'undefined') {
                        tempLink.setAttribute('target', '_blank')
                    }
                    // 挂载a标签
                    document.body.appendChild(tempLink)
                    tempLink.click()
                    document.body.removeChild(tempLink)
                    // 释放blob URL地址
                    window.URL.revokeObjectURL(blobURL)
                }
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      },
      // 导入
      onImport(event, file, fileList) {
        // this.formInline.userid = sessionStorage.getItem("userid");
        let data = new FormData();
        data.append("file", file.raw);
        this.$http.post(`/fileSubscribe/save/excel`, data).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.formInline.pageNum = 1;
              this.onSearch();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      },
      handleTabsClick(tab, event) {
        console.log(tab, event);
        if (this.activeName == "isexamine_1") {
          this.formInline.isexamine = 1;
        } else if (this.activeName == "isexamine_2") {
          this.formInline.isexamine = 2;
        } else if (this.activeName == "isexamine_3") {
          this.formInline.isexamine = 3;
        } else {
          this.formInline.isexamine = 0;
        }
        if (this.activeName == 'orderProgress'){
          this.formInline.type = 1;
        } else if (this.activeName == 'orderHistory'){
          this.formInline.type = 2;
        }
        this.onSearch();
      },
      handleStop(row) {
        let type = "1";
        if (row.state == "1") {
          type = "2";
        }
        let req = {
          id: row.id,
          state: type,
        };
        this.$http
          .post(`/fileSubscribe/update`, req)
          .then((res) => {
            if (res.code == 200) {
              this.onSearch();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      },
      handleShow(row, lmsa) {
          this.viewType = lmsa ? 'edit' : 'view';
          this.viewParams = {
              id: row.id,
              fileid: row.fileid
          };
          this.dialogListInfo = true;
          this.$nextTick(() => {
              // console.log(this.$refs.myCustomizationRef);
              this.$refs.myCustomizationRef.$data.flexTableid= row.fileid;
              this.$refs.myCustomizationRef.$data.componentStatus = true;
              if (lmsa) {
                this.$refs.myCustomizationRef.dataInfo(row.fileid);
              }
              this.$refs.myCustomizationRef.dataViewInfo();
            //   console.log(this.$refs.myCustomizationRef.$data, 'fileid');
          });
      },
      handleDownload(row) {
        this.currentRow = row;
        this.fileList = [];
  
        this.$http
          .post(`/dataDetail/list?subscribeid=` + row.id)
          .then((res) => {
            if (res.code == 200) {
              this.fileList = res.data.records || [];
              this.dialogDownload = true;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.tableLoading = false;
            this.$message.error(err.message);
          });
      },
      handleDelete(row){
        this.$confirm('是否删除该文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http .post(`/fileSubscribe/delete?id=${row.id}`).then((res) => {
                if (res.code == 200) {
                  this.onSearch();
                } else {
                  this.$message.error(res.message);
                }
            }) .catch((err) => {
                this.tableLoading = false;
                this.$message.error(err.message);
            });
        }).catch(() => {});
      },
      handleCopy() {
        let text =
          this.currentRow.ipaddr +
          " " +
          this.currentRow.protno +
          " " +
          this.currentRow.url +
          " " +
          this.currentRow.account +
          " " +
          this.currentRow.password;
        try {
          var textarea = document.createElement("textarea");
          textarea.style.position = "fixed";
          textarea.style.opacity = 0;
          textarea.value = text;
          document.body.appendChild(textarea);
          textarea.select();
          document.execCommand("copy");
          document.body.removeChild(textarea);
          //  navigator.clipboard.writeText(txt);
          this.$message.success("复制成功");
        } catch (error) {
          this.$message.error("复制失败");
        }
      },
      handleExamineShow(row) {
        this.currentRow = row;
        this.formIsexamine.isexamine = row.isexamine;
        this.formIsexamine.examineview = row.isexamine;
        this.viewParams = {
          id: row.id,
        };
        this.dialogExamine = true;
        this.$nextTick(() => {
            // console.log(this.$refs.myCustomizationRef);
            this.$refs.myCustomizationRef.dataViewInfo();
        });
      },
      handleExamine2() {
        this.formIsexamine.isexamine = 2;
        this.handleExamine();
      },
      handleExamine3() {
        this.formIsexamine.isexamine = 3;
        this.handleExamine();
      },
      handleExamine() {
        let req = {
          examineview: this.formIsexamine.examineview,
          id: this.currentRow.id,
          isexamine: this.formIsexamine.isexamine,
        };
        this.$http
          .post(`/fileSubscribe/update/examine`, req)
          .then((res) => {
            if (res.code == 200) {
              this.dialogExamine = false;
              this.onSearch();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      },
      handleCurrentChange(page) {
        this.formInline.pageNum = page;
        this.onSearch();
      },
      handleSizeChange(size) {
        this.formInline.pageSize = size;
        this.onSearch();
      },
      handleClose() {
        this.dialogListInfo = false;
        this.dialogExamineStatus = false;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .orderDom {
    height: 100%;
    background-color: #fff;
    padding: 20px;
    ::v-deep .el-dialog__wrapper {
      // .el-dialog__header {
      //   background-image: linear-gradient(
      //     to right,
      //     #89b7fb,
      //     #b1c7fc,
      //     #d1d8fc,
      //     #ebebfd,
      //     #ffffff
      //   );
      // }
      .el-dialog__header{
          padding: 10px;
          background-image: url(../../../public/image/dialog-head.png);
          background-size: 100% 100%;
          .el-dialog__title{
            color:#000;
    
          }
        }
        .el-dialog__body{
          padding: 0 10px;
        }
      .dialog-border {
        border-top: 2px solid #409eff;
        margin-bottom: 10px;
      }
      .dialog-footer {
      }
    }
    ::v-deep .demo-form-inline-box {
      background-color: #f8f8f8;
      padding: 10px 10px 0 10px;
      font-size: 16px;
      .el-form-item__label {
        font-weight: bold;
        color: dodgerblue;
      }
    }
    ::v-deep .demo-form-mini {
      .el-form-item {
        margin-bottom: 0 !important;
      }
      .el-form-item__label {
        font-weight: bold;
      }
      .radio-isexamine {
        .el-radio__inner {
          border: 1px solid dodgerblue;
        }
        .el-radio__label {
          font-size: 16px;
          color: #000;
        }
      }
    }
  }
  </style>
  